<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TodoHeader @addList="addList"></TodoHeader>

    <!-- 主体部分 -->
    <TodoBody :list="list" :checkall="checkall" @delet="delet"></TodoBody>
    <TodoFooter :count="count"></TodoFooter>
  </section>
</template>

<script>
import TodoBody from '@/components/TodoBody.vue'
import TodoFooter from '@/components/TodoFooter.vue'
import TodoHeader from '@/components/TodoHeader.vue'

export default {
  components: {
    TodoHeader,
    TodoBody,
    TodoFooter
  },
  data () {
    return {
      list: [
        { id: 1, name: '爬山', state: true },
        { id: 2, name: '旅游', state: true },
        { id: 3, name: '回家', state: false }
      ]
    }
  },
  methods: {
    delet (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    addList (value) {
      const obj = { id: +new Date(), name: value, state: false }
      this.list = [obj, ...this.list]
    }
  },
  computed: {
    count () {
      return this.list.filter(item => item.state === false).length
    }
  }
}
</script>

<style></style>
